/**
 * Created by camilla.luo on 2017/4/10.
 * don't support IE7,IE7- ,because IE7dont support querySelector but querySelectorAll
 * IE678 dont support pageX
 * 兼容性：支持到IE8及以上高版本浏览器
 */
'use strict';
(function (window,document,Math) {
    var utils=(function () {
        var util={};
        util.getStyle= function (obj) {
            /*ie Browser and other Browser*/
            return obj.currentStyle?obj.currentStyle:document.defaultView.getComputedStyle(obj,null);
        };
        //检测传入的字符串是不是在json对象中存在这个属性
        util.hasMatch= function (test,obj) {
            return new RegExp(test).test(JSON.stringify(obj));

        };
        //事件监控的兼容性处理
        util.addEvent= function (obj,type,fn,cap) {
            if(window.addEventListener){
                obj.addEventListener(type,fn,cap);
            }else{
                obj.attachEvent('on'+type,fn);
            }
        };
        util.removeEvent= function (obj,type,fn,cap) {
            if(window.addEventListener){
                obj.removeEventListener(type,fn,cap);
            }else{
                obj.detachEvent('on'+type,fn);
            }
        };
        //ie678不支持pageX，兼容处理
        util.pageXY= function (e) {
            var x= e.pageX|| e.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
            var y= e.pageY|| e.clientY+document.body.scrollTop||document.documentElement.scrollTop;
            return {
                x:x,
                y:y
            }
        };
        return util;
    })();
    function MouseAxis(el,options){
        this.targetEle=typeof el=='string'?document.querySelector(el):el;
        this.targetStyle=utils.getStyle(this.targetEle);
        this.options={
            hasMask:true,
            maskObj:document.querySelector('#targetMask'),
            maskShow:true,
            moveFinished:true
        };
        for(var i in options){
            this.options[i]=options[i];
        }
        this._init();
    }
    MouseAxis.prototype={
        version:'1.0.0',
        _init: function () {
            var self=this;
            if(this.options.hasMask){
                utils.addEvent(this.targetEle,'mouseenter', function (e) {
                    var ev=e||window.event;
                    self.mouseEnter(ev);
                },false);
                utils.addEvent(this.targetEle,'mouseleave', function (e) {
                    var ev=e||window.event;
                    self.mouseLeave(ev);
                },false);
            }
        },
        mouseEnter: function (e) {
            if(this.options.hasMask&&this.options.maskShow){
                //if(this.options.moveFinished==true)
                this._showMask(e);
            }
        },
        mouseLeave: function (e) {
            if(this.options.hasMask&&this.options.maskShow){
                //if(this.options.moveFinished==true)
                this._hideMask(e);
            }
        },
        _showMask: function (e) {
            var self=this;
            var w=this.targetStyle.width;
            var h=this.targetStyle.height;
            var obj=this.options.maskObj;
            var step=50;
            self.options.moveFinished=false;
            /*根据鼠标进入的方向，分为上，右，下，左，遮盖层进入的方向不同*/
            switch (this._enterDir(e)){
                case 0:top();break;
                case 1:right();break;
                case 2:bottom();break;
                case 3:left();break;
            }
            function top () {
                obj.style.top='-'+h;
                obj.style.left=0;
                topGo();
                function topGo(){
                    _requestAnimationFrame(function () {
                        var aa=window.requestAnimationFrame;
                        if(obj.offsetTop>=-1){
                            obj.style.top=0;
                            self.options.moveFinished=true;
                            return;
                        }
                        console.log(obj.style.top);
                        obj.style.top=(obj.offsetTop+step)+'px';
                        topGo();
                    });
                }
               /* var timer=window.setInterval(function () {
                    if(obj.offsetTop>=-1){
                        obj.style.top=0;
                        clearInterval(timer);
                        self.options.moveFinished=true;
                        return;
                    }
                    obj.style.top=(obj.offsetTop+step)+'px';

                },1000/60);*/
            }
            function right () {
                obj.style.top=0;
                obj.style.left=w;
                rightGo();
                function rightGo(){
                    _requestAnimationFrame(function () {
                        if(obj.offsetLeft<=1){
                            obj.style.left=0;
                            self.options.moveFinished=true;
                            return;
                        }
                        obj.style.left=(obj.offsetLeft-step)+'px';
                        rightGo();
                    });
                }
                /*var timer=window.setInterval(function () {
                    if(obj.offsetLeft<=1){
                        obj.style.left=0;
                        clearInterval(timer);
                        self.options.moveFinished=true;
                        return;
                    }
                    obj.style.left=(obj.offsetLeft-step)+'px';

                },1000/60);*/
            }
            function bottom() {
                obj.style.top=h;
                obj.style.left=0;
                bottomGo();
                function bottomGo(){
                    _requestAnimationFrame(function () {
                        if(obj.offsetTop<=1){
                            obj.style.top=0;
                            self.options.moveFinished=true;
                            return;
                        }
                        obj.style.top=(obj.offsetTop-step)+'px';
                        bottomGo();
                    });
                }
                /*var timer=window.setInterval(function () {
                    if(obj.offsetTop<=1){
                        obj.style.top=0;
                        clearInterval(timer);
                        self.options.moveFinished=true;
                        return;
                    }
                    obj.style.top=(obj.offsetTop-step)+'px';

                },1000/60);*/
            }
            function left () {
                obj.style.top=0;
                obj.style.left='-'+w;
                leftGo();
                function leftGo(){
                    _requestAnimationFrame(function () {
                        if(obj.offsetLeft>=-1){
                            obj.style.left=0;
                            self.options.moveFinished=true;
                            return;
                        }
                        obj.style.left=(obj.offsetLeft+step)+'px';
                        leftGo();
                    });
                }
               /* var timer=window.setInterval(function () {
                    if(obj.offsetLeft>=-1){
                        obj.style.left=0;
                        clearInterval(timer);
                        self.options.moveFinished=true;
                        return;
                    }
                    obj.style.left=(obj.offsetLeft+step)+'px';

                },1000/60);*/
            }
        },
        _hideMask: function (e) {
            var self=this;
            var w=this.targetStyle.width;
            var h=this.targetStyle.height;
            var obj=this.options.maskObj;
            var step=10;
            obj.style.top=0;
            obj.style.left=0;
            self.options.moveFinished=false;
            /*根据鼠标进入的方向，分为上，右，下，左，遮盖层进入的方向不同*/
            switch (this._enterDir(e)){
                case 0:top();break;
                case 1:right();break;
                case 2:bottom();break;
                case 3:left();break;
            }
            function top () {
                topGo();
                function topGo(){
                    _requestAnimationFrame(function(){
                        if(obj.offsetTop<=-window.parseInt(h)){
                            obj.style.top='-'+h;
                            self.options.moveFinished=true;
                            return;
                        }
                        obj.style.top=(obj.offsetTop-step)+'px';
                        topGo();
                    });
                }
                /* var timer=window.setInterval(function () {
                     if(obj.offsetTop<=-window.parseInt(h)){
                         obj.style.top='-'+h;
                         clearInterval(timer);
                         self.options.moveFinished=true;
                         return;
                     }
                     obj.style.top=(obj.offsetTop-step)+'px';

                 },1000/60);*/
            }
            function right () {
                rightGo();
                function rightGo(){
                    _requestAnimationFrame(function () {
                        if(obj.offsetLeft>=window.parseInt(w)){
                            obj.style.left=w;
                            self.options.moveFinished=true;
                            return;
                        }
                        obj.style.left=(obj.offsetLeft+step)+'px';
                        rightGo();
                    });
                }
                /*var timer=window.setInterval(function () {
                    if(obj.offsetLeft>=window.parseInt(w)){
                        obj.style.left=w;
                        clearInterval(timer);
                        self.options.moveFinished=true;
                        return;
                    }
                    obj.style.left=(obj.offsetLeft+step)+'px';

                },1000/60);*/
            }
            function bottom() {
                bottomGo();
                function bottomGo(){
                    _requestAnimationFrame(function () {
                        if(obj.offsetTop>=window.parseInt(h)){
                            obj.style.top=h;
                            self.options.moveFinished=true;
                            return;
                        }
                        obj.style.top=(obj.offsetTop+step)+'px';
                        bottomGo();
                    });
                }
                /*var timer=window.setInterval(function () {
                    if(obj.offsetTop>=window.parseInt(h)){
                        obj.style.top=h;
                        clearInterval(timer);
                        self.options.moveFinished=true;
                        return;
                    }
                    obj.style.top=(obj.offsetTop+step)+'px';

                },1000/60);*/
            }
            function left () {
                leftGo();
                function leftGo(){
                    _requestAnimationFrame(function () {
                        if(obj.offsetLeft<=-window.parseInt(w)){
                            obj.style.left='-'+w;
                            self.options.moveFinished=true;
                            return;
                        }
                        obj.style.left=(obj.offsetLeft-step)+'px';
                        leftGo();
                    });
                }
               /* var timer=window.setInterval(function () {
                    if(obj.offsetLeft<=-window.parseInt(w)){
                        obj.style.left='-'+w;
                        clearInterval(timer);
                        self.options.moveFinished=true;
                        return;
                    }
                    obj.style.left=(obj.offsetLeft-step)+'px';

                },1000/60);*/
            }
        },
        _mouseOver: function (e) {
        },
        _enterDir: function (e) {
            var ele=this.targetEle,s=this.targetStyle, w, h, x,y;
            w=parseInt(s.width);
            h=parseInt(s.height);
            x=(utils.pageXY(e).x-ele.offsetLeft-(w/2))*(w>h?h/w:1);
            y=(utils.pageXY(e).y-ele.offsetTop-(h/2))*(h>w?w/h:1);
            /*0,1,2,3 分别代表上，右，下，左*/
            return Math.round(((Math.atan2(y,x)*(180/Math.PI))+180)/90+3)%4;
        }
    };
    MouseAxis.utils=utils;
    /*Polyfills*/
    var _requestAnimationFrame=window.requestAnimationFrame|| window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame|| window.msCancelRequestAnimationFrame|| window.oRequestAnimationFrame|| function(callback){window.setTimeout(callback,1000/60)};
    /*Module Wrapper*/
    if ( typeof module != 'undefined' && module.exports ) {
        module.exports = MouseAxis;
    } else if ( typeof define == 'function' && define.amd ) {
        define( function () { return MouseAxis; } );
    } else {
        window.MouseAxis = MouseAxis;
    }

})(window,document,Math);